<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cluster Test</title>
    <script type="text/javascript" src="../../../dist/vis.js"></script>
    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        #network_graph {
            width: 1000px;
            height: 800px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body onload="draw()">
<p>
    Clusters can contain other clusters, but clusters of a single node is only possible by adding
<pre>allowSingleNodeCluster: true</pre>
to clusterNodeProperties<br/>
In this example repeatedly clicking on the node with open the Clusters.
</p>
<div id="network_graph"></div>
<div id="info"></div>
<script type="text/javascript">
    var network;

    var node_color = ['orange', 'green', 'red', 'yellow', 'cyan'];
    var node_shape = ['star', 'database', 'diamond', 'square', 'triangle'];
    var nodes = new vis.DataSet([
        {id: 'x', label: 'Node X'},
        {id: 'y', label: 'Node Y'},
    ]);
    var network_options = {};
    var edges = new vis.DataSet([
        {from: 'x', to: 'y'}
    ]);

    var cluster_id = 1;

    function draw() {
        network = new vis.Network(
                document.getElementById('network_graph'),
                {
                    nodes: nodes,
                    edges: edges
                },
                network_options
        );
        network.on('click', function (params) {
            if (params.nodes.length == 1) {
                if (network.isCluster(params.nodes[0]) == true) {
                    network.openCluster(params.nodes[0]);
                }
            }
        });
        cluster();
        cluster();
        cluster();
    }

    function cluster() {
        var clusterOptions = {
            joinCondition: function (childOptions) {
                console.log(childOptions);
                return true;
            },
            clusterNodeProperties: {id: cluster_id, label: "Cluster " + cluster_id, color: node_color[cluster_id - 1], shape: node_shape[cluster_id - 1], allowSingleNodeCluster: true}
        };
        cluster_id++;
        network.cluster(clusterOptions);
    }
</script>
</body>
</html>
